<template>
    <view class="box">
        <!-- 自定义nvabar s -->
        <view>
            <nav-bar :title="'我的订单'"></nav-bar>
        </view>
        <!-- 自定义nvabar e-->
        <!-- 顶部订单导航 s -->
        <view class="viewtextheight">
            <v-tabs v-model="current"
                    :tabs="topnav"
                    field="name"
                    height="60rpx"
                    @change="change"
                    :pills="true"
                    line-height="0"
                    activeColor="#fff"
                    pillsColor="#1bc078"
                    pillsBorderRadius="30rpx"
                    paddingItem="50rpx"></v-tabs>
        </view>


        <!-- 顶部订单导航 e -->
        <swiper
            class="main"
            :style="{minHeight: height + 'px'}"
            :current="swiperCurrent"
            @transition="transition"
            @animationfinish="animationfinish">
            <swiper-item v-for="item in 3" :key="item">
                <scroll-view :scroll-y="true" style="height: 100%;margin-top:30rpx;" lower-threshold="100" @scrolltolower="orderScrolltolower">
                    <orderlist v-for="item in orderList" :key="item" :data="item" @list="toRecList()"></orderlist>
                    <u-loadmore
                        :status="status"
                        :load-text="loadText" />
                        <view class="scrollview-height"></view>
                </scroll-view>
            </swiper-item>
        </swiper>
        <!-- 自定义tabbar s -->
        <tab-bar @clicktabindex="gettabindx"></tab-bar>
        <!-- 自定义tabbar e -->

        <!-- <u-tabbar
            :list="tabBarList"
            active-color="#1bc078"
            inactive-color="#cccccc"
        >
        </u-tabbar> -->
    </view>
</template>

<script>
    import orderlist from './orderlists.vue'

    export default {
        components: {
            orderlist
        },
        data() {
            return {
                current: 0,
                swiperCurrent: 0,
                topnav: [{
                    name: '全部订单',
                    id: null,
                },{
                    name: '待接单',
                    id: 1,
                },{
                    name: '已完成',
                    id: 3,
                }],
                height: 400,
                orderList: [],
                params: {
                    page: 1,
                    limit: 20,
                    status: null,
                },
                olPage: 1,
                status: 'loading',
                loadText: {
                    loadmore: '上拉加载更多',
                    loading: '加载中...',
                    nomore: '没有更多数据了'
                },
            }
        },
        onLoad() {
            // this.tabBarList = this.$store.state.tabBarList.ordinary
        },
        mounted() {
            const query = uni.createSelectorQuery();
            query.in(this).select('.main').boundingClientRect();
            query.exec((res) => {
                this.height = uni.getSystemInfoSync().windowHeight - res[0].top - uni.upx2px(120);
            })
            this._getreclist();
        },
        methods: {
            // 自定义 tabbar
            gettabindx(index) {
                if (index === 0) {
                    uni.redirectTo({
                        url: '../User/index'
                    })
                }
                
                if (index === 2) {
                    uni.redirectTo({
                        url: '../Myhome/Myhome'
                    })
                }
            },
            // 订单导航栏点击改变样式
            change(index) {
                this.current = index
                this.swiperCurrent = index
            },
            transition({ detail: { dx } }) {
                // this.$refs.tabs.setDx(dx)
            },
            animationfinish({ detail: { current } }) {
                // this.$refs.tabs.setFinishCurrent(current)
                this.swiperCurrent = current
                this.current = current
                this.params = {
                    status: this.topnav[current].id,
                    page: 1,
                    limit: 20,
                }
                this.olPage = 1;
                this._getreclist();
            },
            toRecList() {
                this.params.page = 1;
                this._getreclist();
            },
            orderScrolltolower() {
                this.params.page++;
                this._getreclist();
            },
            _getreclist() {
                let params = {};
                this.status = 'loading'
                if(this.params.status == null) {
                    params = {
                        page: this.params.page,
                        limit: this.params.limit,
                    }
                } else {
                    params = {
                        page: this.params.page,
                        limit: this.params.limit,
                        status: this.params.status,
                    }
                }
                this.$u.api.getreclist(params).then(res => {
                    if(this.params.page == 1) {
                        this.status = 'nomore';
                        this.orderList = res.list;
                    } else {
                        if(res.list <= 0) {
                            this.status = 'nomore';
                            this.params.page = this.olPage;
                            return ;
                        }
                        this.olPage = this.params.page;
                        this.orderList = this.orderList.concat(res.list);
                    }
                }).catch(err =>{
                    this.status = 'nomore';
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .box {
        background-color: #EEEEEE;
        // min-height: 100vh;
    }

    .viewtextheight {
        width: 100%;
        height: 88rpx;
        background-color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .main {
        
    }
    .scrollview-height {
        height: calc(120rpx + env(safe-area-inset-bottom));
    }
</style>
